<template>
  <div style="width: 100%">
    <el-collapse v-model="activeName">
      <el-collapse-item title="基本信息" :name="0">
        <el-form
          ref="form"
          :disabled="disabled"
          :model="formDataAll"
          :rules="rules"
          size="small"
          label-width="100px"
        >
          <el-row>
            <el-col :span="12">
              <el-form-item label="中文名称" prop="nameCn">
                <el-input v-model="formDataAll.nameCn"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="编码标识" prop="name" >
                <el-input v-model="formDataAll.name" :disabled="dialogType !== 'add'"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="英文名称" prop="nameEn">
                <el-input v-model="formDataAll.nameEn"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="角色分类" prop="type">
                <el-select style="width: 100%" v-model="formDataAll.type">
                  <template v-for="{ name, oid } in typeList">
                    <el-option
                      :label="name"
                      :key="oid"
                      :value="Number(oid)"
                    ></el-option>
                  </template>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="中文描述" prop="describeCn">
                <el-input v-model="formDataAll.describeCn"></el-input>
              </el-form-item>
            </el-col>
                <el-col :span="24">
              <el-form-item label="英文描述" prop="describeEn">
                <el-input v-model="formDataAll.describeEn"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-collapse-item>
      <el-collapse-item title="用户列表" :name="1">
        <el-transfer
          filterable
          :disabled="disabled"
          :filter-method="filterMethod"
          filter-placeholder="请输入搜索内容"
          v-model="selectedUser"
          :data="userList"
          :titles="['用户搜索', '添加的用户']"
          :props="{
            key: 'pid',
            label: 'username',
          }"
        >
        </el-transfer>
      </el-collapse-item>
    </el-collapse>
    <div class="md-component-btns">
      <el-button size="medium" :disabled="disabled" type="primary" @click="save"
        >保存</el-button
      >
      <el-button size="medium" @click="$emit('removeThisTabs')">取消</el-button>
    </div>
  </div>
</template>

<script>
import * as api from "@/api/roleManage/roleManage";

export default {
  name: "roleManageTemp",
  data() {
    return {
      dialogType: "add",
      currentData: {},
      userList: [],
      selectedUser: [],
      activeName: [0, 1],
      typeList: [
        {
          oid: 3,
          name: "系统角色",
        },
        {
          oid: 2,
          name: "团队角色",
        },
      ],
      formDataAll: {
        nameCn: "",
        name: "",
        nameEn: "",
        type: "",
        describeCn: "",
        describeEn: "",
      },
      rules: {
        nameCn: [
          { required: true, message: "请输入中文名称", trigger: "blur" },
        ],
        name: [{ required: true, message: "请输入编码标识", trigger: "blur" }],
        describeCn: [
          { required: true, message: "请输入中文描述", trigger: "blur" },
        ],
        type: [{ required: true, message: "请选择角色分类", trigger: "blur" }],
      },
    };
  },
  computed: {
    disabled() {
      return this.dialogType === "view";
    },
  },
  methods: {
    filterMethod(query, item) {
      return item.username.indexOf(query) > -1;
    },
    save() {
      this.$refs["form"].validate((f) => {
        if (f) {
          // if (this.selectedUser.length === 0 ) {
          //   this.$message.error("角色至少包含一位用户！");
          //   return;
          // }
          const newUserList = this.userList
            .filter((v) => this.selectedUser.indexOf(v.pid) > -1)
            .map((v) => ({ name: v.username, pid: v.pid }));
          const paramData = {
            ...this.formDataAll,
            userList: newUserList,
          };
          // let form = this.deepCopy(this.formDataAll);
          if (this.dialogType === "add") delete paramData.pid
          let method = this.dialogType === "add" ? 'insertRole' : 'updateRole';
          let msg = this.dialogType === "add" ? '新增' : '编辑';
          api[method](paramData).then(() => {
            this.$message.success(msg);
            this.$emit("refresh");
            this.$emit("removeThisTabs");
          });
        }
      });
    },
    getUserList() {
      api.getUserList().then((res) => {
        const newData = res.data.data;
        this.userList = newData.map((v) => ({
          ...v,
          disabled: this.dialogType === "view",
        }));
      });
    },
    open() {
      this.dialogType = "add";
      this.getUserList();
    },
    edit(row) {
      this.dialogType = "edit";
      this.getDetails(row.pid);
      this.getUserList();
      this.currentData = { ...row };
    },
    view(row) {
      this.dialogType = "view";
      this.getDetails(row.pid);
      this.getUserList();
      this.currentData = { ...row };
    },
    getDetails(pid) {
      api.detail({ id: pid }).then((res) => {
        const newData = res.data.data;
        const {
          mxUserVoList = [],
        } = newData;
        this.formDataAll = { ...newData };
        this.selectedUser = mxUserVoList.map((v) => v.pid);
      });
    },
  },

};
</script>
<style lang="scss" scoped>
::v-deep .el-transfer {
  display: flex;
  align-items: center;
  padding-left: 15px;
}
</style>
